<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 乐考无忧</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <style>
        body {
            background-color: #f5f5f5;
            padding-bottom: 60px;
        }
        .profile-header {
            background: linear-gradient(135deg, #00b8a9, #00a19a);
            color: white;
            padding: 25px 20px;
            border-radius: 0 0 30px 30px;
            margin-bottom: 20px;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        .avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.3);
            overflow: hidden;
        }
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .study-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 15px;
            background: rgba(255,255,255,0.1);
            border-radius: 15px;
        }
        .stat-item {
            text-align: center;
        }
        .stat-value {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 0.8rem;
            opacity: 0.9;
        }
        .menu-section {
            background: white;
            border-radius: 15px;
            margin: 15px;
            overflow: hidden;
        }
        .section-title {
            padding: 15px;
            color: #666;
            font-size: 0.9rem;
            border-bottom: 1px solid #eee;
        }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 15px;
            text-decoration: none;
            color: #333;
            border-bottom: 1px solid #f5f5f5;
        }
        .menu-item:last-child {
            border-bottom: none;
        }
        .menu-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 1.2rem;
        }
        .menu-icon.blue { background: #e6f3ff; color: #4d96ff; }
        .menu-icon.green { background: #e6fff3; color: #00b8a9; }
        .menu-icon.orange { background: #fff3e6; color: #ffa41b; }
        .menu-icon.purple { background: #f3e6ff; color: #b19cd9; }
        .menu-icon.red { background: #ffe6e6; color: #ff6b6b; }
        .menu-content {
            flex: 1;
        }
        .menu-label {
            font-size: 0.9rem;
            margin-bottom: 3px;
        }
        .menu-desc {
            font-size: 0.8rem;
            color: #999;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: white;
            padding: 10px 0;
            border-top: 1px solid #eee;
        }
        .nav-item {
            text-align: center;
            text-decoration: none;
            color: #666;
            font-size: 0.8rem;
        }
        .nav-item.active {
            color: #00b8a9;
        }
        .nav-item i {
            font-size: 1.2rem;
            margin-bottom: 3px;
        }
        .stat-value {
            position: relative;
            display: inline-block;
        }
        .stat-value[data-progress]::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            height: 3px;
            width: var(--progress);
            background: rgba(255,255,255,0.5);
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <!-- 个人信息头部 -->
    <div class="profile-header">
        <div class="user-info">
            <div class="avatar">
                <img src="images/avatar.jpg" alt="用户头像">
            </div>
            <div>
                <h5 class="mb-1">张同学</h5>
                <div class="small">2024考研 | 计算机专业</div>
            </div>
        </div>
        <div class="study-stats">
            <div class="stat-item">
                <div class="stat-value">42</div>
                <div class="stat-label">打卡天数</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">2460</div>
                <div class="stat-label">积分</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">68%</div>
                <div class="stat-label">学习进度</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">4天</div>
                <div class="stat-label">连续学习</div>
            </div>
        </div>
    </div>

    <!-- 个人信息 -->
    <div class="menu-section">
        <div class="section-title">个人信息</div>
        <a href="profile-edit.html" class="menu-item">
            <div class="menu-icon blue">
                <i class="bi bi-person"></i>
            </div>
            <div class="menu-content">
                <div class="menu-label">基本信息</div>
                <div class="menu-desc">修改个人资料和目标院校</div>
            </div>
            <i class="bi bi-chevron-right text-muted"></i>
        </a>
    </div>

    <!-- 学习数据 -->
    <div class="menu-section">
        <div class="section-title">学习数据</div>
        <a href="study-statistics.html" class="menu-item">
            <div class="menu-icon purple">
                <i class="bi bi-graph-up"></i>
            </div>
            <div class="menu-content">
                <div class="menu-label">学习统计</div>
                <div class="menu-desc">查看学习进度和成绩分析</div>
            </div>
            <i class="bi bi-chevron-right text-muted"></i>
        </a>
        <a href="study-report.html" class="menu-item">
            <div class="menu-icon orange">
                <i class="bi bi-file-text"></i>
            </div>
            <div class="menu-content">
                <div class="menu-label">学习报告</div>
                <div class="menu-desc">每周学习情况分析</div>
            </div>
            <i class="bi bi-chevron-right text-muted"></i>
        </a>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="d-flex justify-content-around">
            <a href="index.html" class="nav-item d-flex flex-column">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </a>
            <a href="qa.html" class="nav-item d-flex flex-column">
                <i class="bi bi-chat-dots"></i>
                <span>答疑</span>
            </a>
            <a href="profile.html" class="nav-item active d-flex flex-column">
                <i class="bi bi-person-fill"></i>
                <span>我的</span>
            </a>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>